<div data-controller="dropdown" data-action="click->dropdown#toggle click@window->dropdown#hide">
  <div id="dropdown-button" class="relative inline-block">
    <%= button_tag type: 'button', role: 'button', tabindex: '0', data: { dropdown_target: 'button', test_id: 'sort-button' }, class: 'flex gap-2 text-sm items-center py-3' do %>
      <span class='hidden lg:inline opacity-50'><%= Spree.t(:sort_by) %>:</span>
      &nbsp;
      <span class="font-semibold">
        <% taxons_sort_options.each do |option| %>
          <% if option[:value] == products_sort %>
            <%= option[:name] %>
          <% end %>
        <% end %>
      </span>

      <%= render 'spree/shared/icons/chevron_down' %>
    <% end %>
    <div data-dropdown-target="menu"
         data-transition-enter="transition ease-out"
         data-transition-enter-from="opacity-0 translate-y-1"
         data-transition-enter-to="opacity-100 translate-y-0"
         data-transition-leave="transition ease-in"
         data-transition-leave-from="opacity-100 translate-y-0"
         data-transition-leave-to="opacity-0 translate-y-1"
         class="hidden absolute top-7 right-0 z-[9999] mt-5 flex w-screen max-w-max">
      <div class="bg-background border-default border overflow-hidden w-72">
        <%= form_with url: canonical_path, method: :get, data: { controller: 'auto-submit' } do |f| %>
          <%= f.hidden_field :q, value: params[:q] %>
          <%= filter_form_fields %>
          <% taxons_sort_options.each do |option| %>
            <%= f.radio_button :sort_by, option[:value],
                               id: "sort-#{option[:value]}",
                               class: 'hidden',
                               data: { action: 'change->auto-submit#submit' },
                               checked: option[:value] == products_sort %>
            <%= f.label "sort-#{option[:value]}", class: 'text-sm cursor-pointer flex items-center justify-between px-4 py-2.5 hover:bg-accent focus:outline-hidden focus:bg-accent transition ease-in-out' do %>
              <%= option[:name] %>
              <% if option[:value] == products_sort %>
                <%= render 'spree/shared/icons/check' %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>
